<template>
  <div class="recommend">
    <Banner></Banner>
    <BorderTitle>推荐歌单</BorderTitle>
    <Loading v-if="tjgdLoading"></Loading>
    <ul class="recommendList">
      <ImgListItem
        v-for="item in recommendList"
        :key="item.id"
        :item="item"
      ></ImgListItem>
    </ul>
    <BorderTitle>最新音乐</BorderTitle>
    <Loading v-if="zxyyLoading"></Loading>
    <SongList
      :songs="newSongList"
      @play="$emit('play', $event)"
      class="songlist"
    ></SongList>
    <BorderTitle>热门歌手</BorderTitle>
    <Loading v-if="rmgsLoading"></Loading>
    <HotArList :hotArtists="hotArtists" class="hotArList"></HotArList>
    <BorderTitle>MV热榜</BorderTitle>
    <HotMv :mvList="mvList"></HotMv>
    <Loading v-if="mvLoading"></Loading>
  </div>
</template>

<script>
import BorderTitle from "@/components/BorderTitle";
import ImgListItem from "@/components/ImgListItem";
import SongList from "@/components/SongList";
import HotArList from "@/components/HotArList";
import HotMv from "@/components/HotMv";
import Loading from "@/components/Loading";
import Banner from "@/components/Banner";
export default {
  name: "Recommend",
  data() {
    return {
      recommendList: [],
      newSongList: [],
      hotArtists: [],
      mvList: [],
      tjgdLoading: false,
      zxyyLoading: false,
      rmgsLoading: false,
      mvLoading: false,
    };
  },
  created() {
    this.tjgdLoading = true;
    this.$http.get("/personalized").then((d) => {
      this.tjgdLoading = false;
      // console.log(d);
      this.recommendList = d.data.result.slice(0, 6);
    });
    this.zxyyLoading = true;
    this.$http
      .get("/personalized/newsong", {
        params: {
          limit: 20,
        },
      })
      .then((d) => {
        this.zxyyLoading = false;
        // console.log(d);
        this.newSongList = d.data.result;
      });
    this.rmgsLoading = true;
    this.$http
      .get("/top/artists", {
        params: {
          limit: 10,
        },
      })
      .then((d) => {
        this.rmgsLoading = false;
        // console.log(d);
        this.hotArtists = d.data.artists;
      });
    this.mvLoading = true;
    this.$http
      .get("/top/mv",{
        params: {
          limit: 6,
        },
      })
      .then((d) => {
        this.mvLoading = false;
        // console.log(d);
        this.mvList = d.data.data;
      });
  },
  components: {
    BorderTitle,
    ImgListItem,
    SongList,
    HotArList,
    HotMv,
    Loading,
    Banner,
  },
};
</script>
<style lang="less" scoped>
.recommend {
  padding: 15px;
  .recommendList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 15px;
  }
  .songlist {
    margin-bottom: 30px;
  }
  .hotArList{
    margin-bottom: 20px;
  }
}
</style>
